<template>
  <div class="content-table">
    <el-table :data="parcel"  header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" >
      <el-table-column width="160" prop="order_no" label="乐惠订单号"></el-table-column>
      <el-table-column width="100" prop="pay_time" label="支付时间"></el-table-column>
      <el-table-column width="100" prop="contact" label="昵称"></el-table-column>
      <el-table-column width="80" prop="trace_type" label="付款方式"></el-table-column>
      <el-table-column width="70" prop="pay_code" label="支付码"></el-table-column>
      <el-table-column width="100" label="实付金额">
        <template slot-scope="scope">
          <span style="color: #FF679E"><i class="yen">￥</i>{{scope.row.origin}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" label="手续费">
        <template slot-scope="scope">
          <span style="color: #FF679E"><i class="yen">￥</i>{{scope.row.commission}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" label="实收金额">
        <template slot-scope="scope">
          <span style="color: #FF679E"><i class="yen">￥</i>{{scope.row.money}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150" prop="shop_name" label="门店名称"></el-table-column>
      <el-table-column width="150" prop="theme_name" label="主题名称"></el-table-column>
      <el-table-column width="80" prop="show_time" label="时间">
      </el-table-column>
      <el-table-column label="结果">
        <template slot-scope="scope">
          <div class="green" v-if="scope.row.state == 'match'">金额一致</div>
          <div class="red"  v-if="scope.row.state == 'not_match'">金额不一致</div>
          <div class="orange"  v-if="scope.row.state == 'no_time'">无场次数据</div>
          <div class="orange"  v-if="scope.row.state == 'already_refund'">已退款</div>
          <div class="orange"  v-if="scope.row.state == 'refund_has_time'">退款后仍有预订信息</div>
        </template>
      </el-table-column>
      <el-table-column width="150"  label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"  plain @click="lookDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pager :total="total" v-if="!!total" @upload="pagerChange"></pager>
  </div>
</template>

<script>
    import pager from '@/components/pager';
    export default {
      name: "traidingList",
      components: {pager},
      props:['parcel','total'],
      data() {
        return {
          cellStyle:{
            "color":"#000",
            "fontSize":"14px"
          },
          loading:true
        }
      },

      methods: {
        headStyle(){
          return 'background: #F2F2F2;font-size: 14px;color: #9E9E9E;'
        },
        edit(item,row){
          this.$emit('upload',{item,row});
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
          if(columnIndex == 3 ){
            if(rowIndex == 0){
              return{
                rowspan:6,
                colspan:1
              }
            }
          }
        },
        lookDetail(row){
          window.open(`/admin/finance/index.html?theme_id=${row.theme_id}&date=${row.date}&theme_time_id=${row.theme_time_id}&shop_id=${row.shop_id}&edit=true`);
        },
        pagerChange(obj){
          this.$emit('upload',obj)
        }

      }
    }
</script>

<style scoped lang = "scss">
  .m-panel{
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
  }
</style>
